<template>
  <div id="mydiv">
    <el-tabs v-model="activeName" type="card" @tab-click="changeData">
      <el-tab-pane label="待审核" name="1">
        <RefundSearch></RefundSearch>
        <RefundTable @addTabs1="addTabs"></RefundTable>
      </el-tab-pane>
      <el-tab-pane label="待退款" name="2">
        <RefundSearch></RefundSearch>
        <RefundTable @addTabs1="addTabs"></RefundTable>
      </el-tab-pane>
      <el-tab-pane label="已退款" name="3">
        <RefundSearch></RefundSearch>
        <RefundTable @addTabs1="addTabs"></RefundTable>
      </el-tab-pane>
      <el-tab-pane label="不同意退款" name="4">
        <RefundSearch></RefundSearch>
        <RefundTable @addTabs1="addTabs"></RefundTable>
      </el-tab-pane>
      <el-tab-pane
        v-for="item in editableTabs"
        :key="item.name"
        :label="item.title"
        :name="item.name"
      >
        <component :is="item.content"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import RefundSearch from "../components/RefundSearch";
import RefundTable from "../components/RefundTable";
import RefundDetails from "../views/RefundDetails";
export default {
  components: {
    RefundSearch,
    RefundTable,
    RefundDetails,
  },
  name: "Refund",
  data() {
    return {
      show1: true,
      show2: false,
      show3: false,
      show4: false,
      activeName: "1",
      editableTabs: [],
    };
  },
  methods: {
    changeData() {
      // console.log(this.activeName);
      if (this.activeName === "1") {
        this.editableTabs.splice(0, 1);
      }
      if (this.activeName === "2") {
        this.$store.dispatch("changedataActions");
        this.editableTabs.splice(0, 1);
      }
      if (this.activeName === "3") {
        this.editableTabs.splice(0, 1);
      }
      if (this.activeName === "4") {
        this.editableTabs.splice(0, 1);
      }
      
            // console.log(this.activeName)
        this.$store.dispatch('changeBulkStateActions',this.activeName)
        this.getTableData(1,5)

    },
    addTabs() {
      this.activeName = "5";
      this.editableTabs.push({
        title: "退款详情",
        name: "5",
        content: "RefundDetails",
      });
    },
    getTableData(nowPage,perPageNum){
            let data=function(a,b){
                this.nowPage=a;
                this.perPageNum=b
            }
            const data1=new data(nowPage,perPageNum)
            this.$store.dispatch('gettableDataActions',data1)
    }
  },
  created() {
    // console.log(this.$route.query);
  },
};
</script>
<style lang="less" scoped>
// #mydiv{
//     background: #FFF;
//     border: 1px solid #DCDFE6;
//     box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
//     // padding: 0 5px;
// }
</style>